import React from 'react';
import { Layout, Menu } from 'antd';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import {
    DashboardOutlined,
    UserOutlined,
    SettingOutlined,
    MonitorOutlined,
} from '@ant-design/icons';

const { Sider, Content } = Layout;

const menuItems = [
    {
        key: '/admin',
        icon: <DashboardOutlined />,
        label: '仪表板',
    },
    {
        key: '/admin/users',
        icon: <UserOutlined />,
        label: '用户管理',
    },
    {
        key: '/admin/monitor',
        icon: <MonitorOutlined />,
        label: '系统监控',
    },
    {
        key: '/admin/settings',
        icon: <SettingOutlined />,
        label: '系统设置',
    },
];

const Dashboard: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();
    
    return (
        <Layout style={{ minHeight: '100%' }}>
            <Sider width={200}>
                <Menu
                    mode="inline"
                    selectedKeys={[location.pathname]}
                    style={{ height: '100%', borderRight: 0 }}
                    items={menuItems}
                    onClick={({ key }) => navigate(key)}
                />
            </Sider>
            <Layout style={{ padding: '24px' }}>
                <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
                    <Outlet />
                </Content>
            </Layout>
        </Layout>
    );
};

export default Dashboard; 